<template>
  <div class="chart-box">
    <el-row v-loading="chartLoading" class="pie-row">
      <chart
        :option="commonGaugeOption"
        ref="guageChart"
        auto-resize
        style="width: 100%; height: 100%"
      ></chart>
    </el-row>
  </div>
</template>

<script>
import nt from '../../../../../network'

 import _ from 'lodash'
import mixinOption from '../../../../utils/mixinOption'
import parseApi from '../../../../utils/parseApi'

export default {
  name: 'custom-report-component-chart-gauge',
  props: {
    api: {},
    method: {
      type: String,
      default: 'get',
    },
    dataKey: {},
    mainTitle: {},
    componentData: {},
    changeSize: {},
    changeData: {},
    interval: {},
    time: {},
    mixinParam: {
      type: Object,
      default() {
        return {}
      },
    },
  },
  data() {
    return {
      comInterval: 0,
      blueColors: [
        [0.2, 'rgba(255,0,0,0.8)'],
        [0.8, 'rgba(0,255,255,0.8)'],
        [1, 'rgba(0,255,0,0.8)'],
      ],
      chartLoading: false,
      isDataReady: false,
      commonGaugeOption: {},
      commonGaugeData: {
        datass: '',
        tooltip: {
          formatter: '{a} <br/>{b} : {c}%',
        },
        series: [
          {
            name: '仪表盘示例', // 系列名称,用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列。
            type: 'gauge', // 系列类型
            radius: '90%', // 参数:number, string。 仪表盘半径,默认 75% ，可以是相对于容器高宽中较小的一项的一半的百分比，也可以是绝对的数值。
            center: ['50%', '55%'], // 仪表盘位置(圆心坐标)
            startAngle: 225, // 仪表盘起始角度,默认 225。圆心 正右手侧为0度，正上方为90度，正左手侧为180度。
            endAngle: -45, // 仪表盘结束角度,默认 -45
            clockwise: true, // 仪表盘刻度是否是顺时针增长,默认 true。
            min: 0, // 最小的数据值,默认 0 。映射到 minAngle。
            max: 100, // 最大的数据值,默认 100 。映射到 maxAngle。
            splitNumber: 5, // 仪表盘刻度的分割段数,默认 10。
            axisLine: {
              // 仪表盘轴线(轮廓线)相关配置。
              show: true, // 是否显示仪表盘轴线(轮廓线),默认 true。
              lineStyle: {
                // 仪表盘轴线样式。
                color: [
                  [0.5, 'rgba(37,204,167,1)'],
                  [0.8, 'rgb(247, 219, 77)'],
                  [1, 'rgb(255, 99, 64)'],
                ], //仪表盘的轴线可以被分成不同颜色的多段。每段的  结束位置(范围是[0,1]) 和  颜色  可以通过一个数组来表示。默认取值：[[0.2, '#91c7ae'], [0.8, '#63869e'], [1, '#c23531']]
                opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
                width: 20, //轴线宽度,默认 30。
                shadowBlur: 20, //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
                shadowColor: '#fff', //阴影颜色。支持的格式同color。
              },
            },
            //
            splitLine: {
              // 分隔线样式。
              show: true, // 是否显示分隔线,默认 true。
              length: 30, // 分隔线线长。支持相对半径的百分比,默认 30。
              lineStyle: {
                // 分隔线样式。
                color: '#eee', //线的颜色,默认 #eee。
                opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
                width: 2, //线度,默认 2。
                type: 'solid', //线的类型,默认 solid。 此外还有 dashed,dotted
                // shadowBlur: 10,             //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
                // shadowColor: "#fff",        //阴影颜色。支持的格式同color。
              },
            },
            //
            axisTick: {
              // 刻度(线)样式。
              show: false, // 是否显示刻度(线),默认 true。
              splitNumber: 5, // 分隔线之间分割的刻度数,默认 5。
              length: 8, // 刻度线长。支持相对半径的百分比,默认 8。
              lineStyle: {
                // 刻度线样式。
                color: '#eee', //线的颜色,默认 #eee。
                opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
                width: 1, //线度,默认 1。
                type: 'dotted', //线的类型,默认 solid。 此外还有 dashed,dotted
                shadowBlur: 10, //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
                shadowColor: '#fff', //阴影颜色。支持的格式同color。
              },
            },
            //
            axisLabel: {
              // 刻度标签。
              show: true, // 是否显示标签,默认 true。
              distance: 5, // 标签与刻度线的距离,默认 5。
              color: '#000', // 文字的颜色,默认 #fff。
              fontSize: 12, // 文字的字体大小,默认 5。
              formatter: '{value}', // 刻度标签的内容格式器，支持字符串模板和回调函数两种形式。 示例:// 使用字符串模板，模板变量为刻度默认标签 {value},如:formatter: '{value} kg'; // 使用函数模板，函数参数分别为刻度数值,如formatter: function (value) {return value + 'km/h';}
            },
            //
            pointer: {
              // 仪表盘指针。
              show: true, // 是否显示指针,默认 true。
              length: '50%', // 指针长度，可以是绝对数值，也可以是相对于半径的百分比,默认 80%。
              width: 4, // 指针宽度,默认 8。
            },

            itemStyle: {
              // 仪表盘指针样式。
              color: 'auto', // 指针颜色，默认(auto)取数值所在的区间的颜色
              opacity: 1, // 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
              borderWidth: 0, // 描边线宽,默认 0。为 0 时无描边。
              borderType: 'solid', // 柱条的描边类型，默认为实线，支持 'solid', 'dashed', 'dotted'。
              borderColor: '#000', // 图形的描边颜色,默认 "#000"。支持的颜色格式同 color，不支持回调函数。
              shadowBlur: 10, // (发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
              shadowColor: '#fff', // 阴影颜色。支持的格式同color。
            },

            emphasis: {
              // 高亮的 仪表盘指针样式
              itemStyle: {
                //高亮 和正常  两者具有同样的配置项,只是在不同状态下配置项的值不同。
              },
            },

            title: {
              // 仪表盘标题。
              show: true, // 是否显示标题,默认 true。
              offsetCenter: [0, '90%'], //相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
              color: '#000', // 文字的颜色,默认 #333。
              fontSize: 12, // 文字的字体大小,默认 15。
            },

            detail: {
              // 仪表盘详情，用于显示数据。
              show: true, // 是否显示详情,默认 true。
              offsetCenter: [0, '50%'], // 相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
              color: 'auto', // 文字的颜色,默认 auto。
              fontSize: 15, // 文字的字体大小,默认 15。
              formatter: function (val) {
                return val
              }, // 格式化函数或者字符串
            },

            data: [{ value: 92, name: '完成率' }],
          },
        ],
      },
    }
  },
  methods: {
    getCommonData: function (callback, newApi) {
      this.chartLoading = true
      let gaugeData = (data) => {
        if (JSON.stringify(data) === '{}') {
          data = {
            valueList: [
              //仪表盘，
              {
                //每个扇形的数据
                unit: '', //数据单位
                data: 0, //区域比例
                name: '', //图例和鼠标悬浮显示字
              },
            ],
          }
        }
        let valueList = data.valueList
        if (!valueList || !valueList.length) {
          valueList = [
            //仪表盘，
            {
              //每个扇形的数据
              unit: '', //数据单位
              data: 0, //区域比例
              name: '', //图例和鼠标悬浮显示字
            },
          ]
        }
        this.commonGaugeData.series[0].min = data.min ? data.min : 0
        this.commonGaugeData.series[0].max = data.max ? data.max : 100
        for (let i = 0; i < valueList.length; i++) {
          this.commonGaugeData.series[0].data[i].value = valueList[i].data
          this.commonGaugeData.series[0].data[i].name = valueList[i].name
        }
        this.commonGaugeData.datass = new Date().toString()
        this.chartLoading = false
        if (!this.isDataReady) {
          this.isDataReady = true
          this.$emit( 'dataReady')
        }
      }

      if (!this.api || !this.api.reqUrl) {
        let data = {
          min: 0,
          max: 100,
          valueList: [
            //仪表盘，
            {
              //每个扇形的数据
              unit: '个', //数据单位
              data: 1, //区域比例
              name: '有状态应用', //图例和鼠标悬浮显示字
            },
          ],
        }
        gaugeData(data)
        if (callback) {
          callback()
        }
      } else {
        nt.doRequest({
          method: 'post',
          uri: '/paas/chart-layout/v1/compdsconfig/testCompDSConfig',
          data: parseApi({
            api: this.api,
            time: this.time,
            mixinParam: this.mixinParam,
          }),
          onSuccess: (resp) => {
            let data = resp.data.content.content
            if (!data) {
              data = {}
            }
            gaugeData(data)
            if (callback) {
              callback()
            }
          },
          onError: () => {
            this.chartLoading = false
            gaugeData({})
            if (callback) {
              callback()
            }
          },
        })
      }
    },
    changeParam() {
      if (this.api) {
        this.getCommonData(this.changeStyle)
        clearInterval(this.comInterval)
        if (this.interval) {
          this.comInterval = setInterval(() => {
            this.getCommonData(this.changeStyle)
          }, this.interval * 1000)
        }
      }
    },
    changeStyle() {
      let componentData = this.componentData
      let commonGaugeData = this.commonGaugeData
      let series = commonGaugeData.series[0]
      let colors = series.axisLine.lineStyle.color
      for (let i = 0; i < colors.length; i++) {
        colors[i][1] = componentData.color[i]
      }
      series.title.show = componentData.series[0].title.show
      series.splitLine.show = componentData.series[0].splitLine.show
      series.axisLabel.show = componentData.series[0].axisLabel.show
      series.axisLine.lineStyle.width =
        componentData.series[0].axisLine.lineStyle.width
      series.axisLabel.distance =
        componentData.series[0].axisLine.lineStyle.width - 10 >= 30
          ? 30
          : componentData.series[0].axisLine.lineStyle.width - 10
      series.pointer.show = componentData.series[0].pointer.show
      series.pointer.pointer =
        100 - componentData.series[0].axisLine.lineStyle.width >= 10
          ? componentData.series[0].axisLine.lineStyle.width + '%'
          : '10%'
      series.detail.show = componentData.series[0].detail.show
      series.center[0] = componentData.left + '%'
      series.title.offsetCenter[1] = componentData.offsetCenter + '%'
      this.commonGaugeData.datass = new Date().toString()
      this.commonGaugeOption = _.cloneDeep(commonGaugeData)
      if (componentData.code) {
        //给开发人员测试的，怕忘记删，生产环境就不打印了
        process.env.NODE_ENV === 'development' &&
          console.log(this.mainTitle + ' 混入前option', commonGaugeData)
        this.commonGaugeOption = mixinOption(
          this.commonGaugeOption,
          componentData.code
        )
        process.env.NODE_ENV === 'development' &&
          console.log(this.mainTitle + ' 混入后option', this.commonGaugeOption)
      }
      if (this.$refs.guageChart) {
        this.$refs.guageChart.resize()
      }
    },
  },
  watch: {
    componentData() {
      this.changeStyle()
    },
    'api.dsName': function () {
      this.getCommonData(this.changeStyle, true)
    },
    changeSize() {
      this.$refs.guageChart.resize()
    },
    time() {
      this.changeParam()
    },
    mixinParam: {
      handler: function (val, oldVal) {
        let int = 0
        int = setInterval(() => {
          if (!this.chartLoading) {
            clearInterval(int)
            this.changeParam()
          }
        }, 50)
      },
      deep: true,
    },
  },
  created: function () {
    this.getCommonData(this.changeStyle)
    if (this.interval) {
      this.comInterval = setInterval(() => {
        this.getCommonData(this.changeStyle)
      }, this.interval * 1000)
    }
  },
  beforeDestroy() {
    clearInterval(this.comInterval)
  },
  emits: ['dataReady'],
}
</script>

<style scoped>
.chart-box {
  width: 100%;
  height: 100%;
  position: relative;
}
.pie-row {
  width: 100%;
  height: 100%;
}
</style>
